<template>
  <div>
    <div class="bg">
      <el-button type="primary" class="mb-10" @click="addGearClick">+ 新增档位</el-button>
      <el-table :data="dataList" stripe style="width: 500px;" border>
        <el-table-column prop="name" label="档位名称" ></el-table-column>
        <el-table-column label="可用时间">
          <template slot-scope="scope">
            {{scope.row.ableStartTime+'-'+scope.row.ableEndTime}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        <el-table-column prop="flagSend" label="操作" width="160" v-if="userInfo.level<3">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" :disabled="scope.row.delete_able===0" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="档位" width="500px" v-if="showGearsFlag" :visible.sync="showGearsFlag" append-to-body
               :close-on-click-modal="false">
      <div class="flex-center mb-10">
        <div class="mr-5 w-120 text-right">档位名称</div>
        <el-input placeholder="请输入档位名称" style="width: 300px" clearable maxlength="50" v-model="currentGear.name"></el-input>
      </div>
      <div class="flex-center mb-10">
        <div class="mr-5 w-120 text-right">可用开始时间</div>
        <el-time-picker value-format="HH:mm:ss" :picker-options="{selectableRange:'00:00:00-23:59:59'}" v-model="currentGear.ableStartTime" placeholder="请选可用开始时间"></el-time-picker>
      </div>
      <div class="flex-center mb-10">
        <div class="mr-5 w-120 text-right">可用结束时间</div>
        <el-time-picker value-format="HH:mm:ss" :picker-options="{selectableRange:  `${currentGear.ableStartTime}-23:59:59`}" v-model="currentGear.ableEndTime" placeholder="请选可用结束时间"></el-time-picker>
      </div>
      <div class="flex-center mb-20">
        <div class="mr-5 w-120 text-right">备注</div>
        <el-input style="width: 300px" type="textarea" v-model="currentGear.remark"></el-input>
      </div>

      <div class="flex-center-center">
        <el-button @click="closeGear">取消</el-button>
        <el-button type="primary" @click="submitGearReq">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ORDERING_GET_GEARS_LIST,
  ORDERING_POST_GEARS_DELETE,
  ORDERING_POST_GEARS_EDIT,
} from "@/assets/const/api";
import {getStore} from "js-utils";
import {Validate} from "js-utils/validate";
import {mapState} from "vuex";

export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
          dataList:[],
          showGearsFlag:false,
          currentGear:{},
        }
    },
    computed: {
      userInfo(){
        return this.$store.state.userInfo||{};
      }
    },
    watch: {},
    created() {
      this.getData()
    },
    mounted () {},
    methods: {
      addGearClick(){
        this.currentGear = {}
        this.showGearsFlag = true
      },
      closeGear(){
        this.showGearsFlag = false
        this.currentGear = {}
      },
      getData(){
        this.$http.get(ORDERING_GET_GEARS_LIST).then(res=>{
          if(res.code === 200){
            this.dataList = res.data||[]
          }
        })
      },
      editClick(row){
        this.currentGear = row
        this.showGearsFlag = true
      },
      deleteClick(row){
        this.$confirm('确认删除该条档位?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(ORDERING_POST_GEARS_DELETE,{id:row.id}).then(res=>{
            if(res.code === 200){
              this.$message.success('操作成功')
              this.getData()
            }
            this.showGearsFlag = false
          })
        }).catch(()=>{})
      },
      submitGearReq(){
        let isEdit =Validate.isEmpty(this.currentGear)
        let dic
        if (isEdit){
          dic = this.currentGear
        }else{
          dic ={...this.currentGear,type:2,}
        }
        dic.ableStartTime = dic.ableStartTime.slice(0,5)
        dic.ableEndTime = dic.ableEndTime.slice(0,5)
        this.$http.post(ORDERING_POST_GEARS_EDIT,dic).then(res=>{
          if(res.code === 200){
            this.$message.success('操作成功')
            this.getData()
          }
          this.showGearsFlag = false
        })
      }
    }
}
</script>

<style scoped lang="scss">
.bg{
  background-color: white;
  padding: 20px;
}
.w-120{
  width: 120px;
}
</style>